<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <script src="../../../../libs/layui/layui.js"></script>
        <link rel="stylesheet" href="../../../../libs/layui/css/layui.css" />
        <style>
            .site-doc-anim {
                margin: 0px;
                padding: 0px !important;
                overflow: hidden;
            }

            .site-doc-anim > li {
                float: left;
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 120px;
            }

            .layui-anim {
                cursor: pointer;
                background-color: #009688;
                color: #fff;
                border-radius: 30px;
                line-height: 60px;
                text-align: center;
                padding: 0px 30px;
                user-select: none;
            }

            .code {
                font-size: 16px;
            }

            @media screen and (min-width: 678px) {
                .site-doc-anim > li {
                    width: 50%;
                    height: 33.3333vh;
                }

                .layui-anim {
                    line-height: 150px;
                    width: 150px;
                    border-radius: 50%;
                    padding: 0px;
                }

                .code {
                    margin-top: 10px;
                }
            }

            @media screen and (min-width: 1200px) {
                .site-doc-anim > li {
                    width: 25%;
                }
            }
        </style>
        <title>Layui - 内置动画 (v2.6.8)</title>
    </head>
    <body>
        <ul class="site-doc-anim">
            <li>
                <div class="layui-anim" data-anim="layui-anim-down">顶部往下滑入</div>
                <div class="code">layui-anim-down</div>
            </li>
            <li>
                <div class="layui-anim" data-anim="layui-anim-downbit">微微往下滑入</div>
                <div class="code">layui-anim-downbit</div>
            </li>
            <li>
                <div class="layui-anim" data-anim="layui-anim-up">底部往上滑入</div>
                <div class="code">layui-anim-up</div>
            </li>
            <li>
                <div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
                <div class="code">layui-anim-upbit</div>
            </li>
            <li>
                <div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
                <div class="code">layui-anim-scale</div>
            </li>
            <li>
                <div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
                <div class="code">layui-anim-scaleSpring</div>
            </li>
            <li>
                <div class="layui-anim" data-anim="layui-anim-scalesmall">平滑放小</div>
                <div class="code">layui-anim-scalesmall</div>
            </li>
            <li>
                <div class="layui-anim" data-anim="layui-anim-scalesmall-spring">弹簧式放小</div>
                <div class="code">layui-anim-scalesmall-spring</div>
            </li>

            <li>
                <div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
                <div class="code">layui-anim-fadein</div>
            </li>
            <li>
                <div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
                <div class="code">layui-anim-fadeout</div>
            </li>
            <li>
                <div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
                <div class="code">layui-anim-rotate</div>
            </li>
            <li>
                <div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
                <div class="code">追加：layui-anim-loop</div>
            </li>
        </ul>

        <script type="text/javascript">
            layui.use(["jquery"], function () {
                var $ = layui.jquery;

                $(".layui-anim").click(function () {
                    var $elem = $(this);
                    var anim = $elem.attr("data-anim");
                    $elem.removeClass(anim);
                    setTimeout(function () {
                        $elem.addClass(anim);
                    }, 1);
                });
            });
        </script>
    </body>
</html>
